<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="content">
    <div class="content-header">
      <a-space>
        <div>
          <a-input-group>
            <a-select
              :style="{
                flex: 1,
                // backgroundColor: '#fff',
              }"
              v-model="currSelectName"
              placeholder="请选择"
              @change="search"
            >
              <a-option value="equipNumber">设备编码（内部）</a-option>
              <a-option value="equipName">设备名称</a-option>
              <!-- 维修单号 -->
            </a-select>
            <a-input-search
              search-button
              :style="{
                flex: 3,
                // border: '1px solid #ccc',
              }"
              placeholder="请输入"
              v-model="currNumber"
              @search="search"
            >
            </a-input-search>
          </a-input-group>
        </div>
        <div>
          <!-- <span> 设备名称： </span> -->
          <a-input
            :style="{ width: 'auto' }"
            placeholder="请输入设备名称"
            v-model="currEquipName"
            search-button
            @change="search"
          >
            <template #prefix>设备名称：</template>
            <!-- <template #button-icon>
            <icon-search />
          </template> -->
          </a-input>
        </div>
        <a-button type="primary" @change="search">
          <template #icon>
            <icon-search />
          </template>
          <template #default>搜索</template>
        </a-button>

        <a-button type="outline" @click="reset">
          <template #icon>
            <icon-refresh />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-space>
    </div>
    <a-divider />
    <TableTurn :table-data="getData" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="报废单号"
        data-index="number"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="设备编码"
        data-index="equipmentNumber"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="设备名称"
        data-index="equipmentName"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="报废原因"
        data-index="scrappedReason"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="申请人"
        data-index="applicant"
      >
      </a-table-column>
      <a-table-column :width="200" align="center" title="申请时间">
        <template #cell="{ record }">
          {{ `${dayjs(record?.createdAt).format('YYYY-MM-DD HH:mm:ss')}` }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="确认结果"
        data-index="status"
      >
        <template #cell="{ record }">
          {{ record.status === 2 ? '确认' : '—' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="确认备注"
        data-index="remark"
      >
        <template #cell="{ record }">
          {{ record.remark ? record.remark : '—' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="确认人"
        data-index="confirmer"
      >
        <template #cell="{ record }">
          {{ record.confirmer ? record.confirmer : '—' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        align="center"
        title="确认时间"
        data-index="confirmAt"
      >
        <template #cell="{ record }">
          {{
            record.confirmAt
              ? `${dayjs(record?.confirmAt).format('YYYY-MM-DD HH:mm:ss')}`
              : '—'
          }}
        </template>
      </a-table-column>
      <!-- 操作item -->
      <a-table-column align="center" :width="150" fixed="right" title="操作">
        <template #cell="{ record }">
          <!-- <a-button
            type="primary"
            v-if="record.status === 1"
            style="margin-right: 20px"
            @click="yes(record.id)"
          >
            确认审核
          </a-button> -->
          <!-- <a-button @click="look(record.id)" type="text"> 查看详情</a-button> -->
          <a-tooltip v-if="record.status === 1" content="确认审核">
            <IconFont
              type="icon-shenhe"
              :size="20"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
                color: 'rgb(22, 93, 254)',
              }"
              @click="yes(record.id)"
            />
          </a-tooltip>
          <a-tooltip content="查看详情">
            <IconFont
              type="icon-details-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="look(record.id)"
            />
          </a-tooltip>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
  <ScrapModal
    :fn="tableRef"
    :type="type"
    v-model:visible="scrapshow"
    :form="scrapData.data"
  />
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { reactive, ref, onMounted, watchEffect, watch } from 'vue';
  import {
    GetEquipmentScrappedPage,
    GetEquipmentScrapped,
  } from '@/api/equipment-management/base-setting/index';
  import type { Tpage } from '@/api/equipment-management/type';
  import ScrapModal from '../../equipment-list/scrap-modal/index.vue';

  const title: string = '设备报废列表';
  const breadCrumb: string[] = ['设备管理', '设备维护（管理）', '设备报废列表'];
  let currSelectName = ref('equipNumber'); // 储存第一个搜索框的下拉框值
  const currEquipName = ref('');
  const currNumber = ref('');
  const tableRef = ref();
  const scrapshow = ref(false);
  const type = ref<2 | 3>(2);
  const search = () => {
    //
  };
  // 重置
  const reset = () => {
    currNumber.value = '';
    currSelectName.value = '';
    currEquipName.value = '';
    tableRef.value.loadData();
  };
  const scrapData = reactive({ data: {} });
  const getData = async (pageData: Tpage) => {
    const searchObj = { equipName: currEquipName.value };
    searchObj[currSelectName.value] = currNumber.value;
    const res = await GetEquipmentScrappedPage({ ...pageData, ...searchObj });
    return Promise.resolve(res);
  };
  const getDataMain = async (id: number) => {
    const res = await GetEquipmentScrapped({ id });
    return res;
  };

  const yes = async (id: number) => {
    const res = await getDataMain(id);
    scrapData.data = res;
    scrapshow.value = true;
    type.value = 2;
  };
  const look = async (id: number) => {
    const res = await getDataMain(id);
    scrapData.data = res;
    scrapshow.value = true;
    type.value = 3;
  };
  watch(
    () => scrapshow.value,
    (val) => {
      if (!val) {
        scrapData.data = {};
      }
    }
  );
</script>

<style scoped lang="less">
  .content {
    padding: 5px 10px;
    &-header {
      display: flex;
      width: 100%;
      height: 40px;
      // justify-content: space-between;
      // margin-top: 5px;
      // :deep(.arco-btn-secondary) {
      //   color: #165dff;
      // }
    }

    .repair-state {
      display: flex;
      justify-content: center;
      text-align: center;
      .cycle {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        top: 3px;
        right: 10px;
      }
    }

    // 待派工
    .waitJob {
      color: #ccc;
    }
    .waitJob-cycle {
      background-color: #ccc;
    }

    // 维修中
    .waitRepair {
      color: #ccc;
    }
    .waitRepair-cycle {
      background-color: #ccc;
    }
    // 进行中
    .running {
      color: #3d7eff;
    }
    .running-cycle {
      background-color: #3d7eff;
    }
    // 需委外
    .needOut {
      color: #f90;
    }
    .needOut-cycle {
      background-color: #f90;
    }
    // 已委外
    .outing {
      color: #3cf;
    }
    .outing-cycle {
      background-color: #3cf;
    }
    // 已完工
    .finish {
      color: #31c27c;
    }
    .finish-cycle {
      background-color: #31c27c;
    }
  }
</style>
